<template>
    <div class="container yuan-container consumption"  :key="'consumption_'+renderKey">

        <div class="page-top">
            <Consumption1 />
        </div>
        <div class="page-bottom">
            <Consumption2 />
            <Consumption3 />
        </div>

    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Consumption1 from "./consumption1.vue";
import Consumption2 from "./consumption2.vue";
import Consumption3 from "./consumption3.vue";
@Component({
    name: "tpl",
    components: { Consumption1, Consumption2, Consumption3 },
})
export default class extends Vue {
    loading = false;

    async mounted() {
        window.addEventListener("resize", this.handleResize);
    }
    renderKey = 1;
    resizeTimer: number | null = null;
    handleResize() {
        // 添加防抖处理（300ms
        if (this.resizeTimer) {
            clearTimeout(this.resizeTimer);
        }

        this.resizeTimer = setTimeout(() => {
            this.renderKey++;
        }, 300);
    }
    beforeDestroy() {
        window.removeEventListener("resize", this.handleResize);
    }
}
</script>
<style lang="scss">
.consumption {
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .page-top {
        height: 49%;
    }
    .page-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 49%;
    }
    .page-child-main {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
    }
    .page-title {
        font-weight: bold;
        font-size: 16px;
        color: #4469f1;
    }
}
</style>
